<template>
	<view class="commentsList" style="overflow-x: hidden; ">
		<!--文章评论区-->
		<view class="commentsList" style="letter-spacing: 0.1rem;">
			<view class="everComments" v-for="(item, index) in commentsList" :key="index">
				<view class="userBaseInfo" @click="seeUser(item.userId)">
					<div v-if="item.userIsVip == true" class="vipLogo t-icon t-icon-VIP" style="transform: rotate(45deg);"></div>
					<view class="head">
						<image v-if="headPic !== ''" :src="item.headPic" mode="aspectFill"></image>
						<image v-else src=""></image>
					</view>
					<view class="nickName">
						{{item.nickName}}
						<div class="userTag">{{item.userTag}}</div>
					</view>
				</view>
				
				<view class="interaction">
					<view class="likes" @click="setLikes(item.id, item.isLike)">
						<view :class="[item.isLike==false?'t-icon t-icon-dianzan':'t-icon t-icon-dianzan-copy']"></view>
						{{item.likes}}
						<!--
						<view class="t-icon" :style="{backgroundImage: 'url('+svglikesUrl+')'}">
						</view>
						<div class="t-icon t-icon-dianzan"></div><span>{{item.likes}}</span>
						<svg class="icon" aria-hidden="true">
						     <use xlink:href="#icon-dianzan"></use>
						 </svg>							
						-->
					</view>
					<view class="commentThis t-icon t-icon-pinglun" @click="prepareToCommentChild(item.id, item.nickName)"></view>
				</view>
				
				<view class="commentContent">
					<span class="leftMark t-icon t-icon-yinhao"></span>&nbsp;
					<p class="commentDetails">
						{{item.content}}
					</p>
					&nbsp;<span class="rightMark t-icon t-icon-yinhao" style="transform: rotate(180deg);"></span>
				</view>
				
				<!--子评论区-->
				<uni-popup class="childrenCommentList" ref="childList" :is-mask-click="true" @maskClick="close(item)">
					<view class="childrenList" style="overflow-y: auto;" @touchmove.stop.prevent="moveStop">
						<view class="everChildComment" v-for="(kid, index1) in childList" :key="index1" style="padding-left: 30upx;padding-top: 20upx;">
							<view class="userBaseInfo">
								<div v-if="kid.userIsVip == true" class="vipLogo t-icon t-icon-VIP" style="transform: rotate(45deg);"></div>
								<view class="head">
									<image v-if="headPic !== ''" :src="kid.headPic" mode="aspectFill"></image>
									<image v-else src=""></image>
								</view>
								<view class="nickName">
									{{kid.nickName}}
									<div class="userTag">{{kid.userTag}}</div>
								</view>
							</view>
							
							<view class="interaction" style="position: relative; left: 70%; top: -40upx;">
								<view class="likes" @click="like(item.id, kid)">
									<view :class="[kid.isLike==false?'t-icon t-icon-dianzan':'t-icon t-icon-dianzan-copy']"></view>
									{{kid.likes}}
									<!--
									<view class="t-icon" :style="{backgroundImage: 'url('+svglikesUrl+')'}">
									</view>
									<div class="t-icon t-icon-dianzan"></div><span>{{item.likes}}</span>
									<svg class="icon" aria-hidden="true">
									     <use xlink:href="#icon-dianzan"></use>
									 </svg>							
									-->
								</view>
								<view class="commentThis t-icon t-icon-pinglun" @click="prepareToCommentKid(item.id, kid.id, kid.nickName)"></view>
							</view>
							
							<view class="commentContent" style=" margin: 0 auto;">
								<span class="leftMark t-icon t-icon-yinhao"></span>&nbsp;
								<p class="commentDetails">
									{{kid.replyTo == ''?kid.content:'回复'+kid.replyTo+': '+kid.content}}
								</p>
								&nbsp;<span class="rightMark t-icon t-icon-yinhao" style="transform: rotate(180deg);"></span>
							</view>
						</view>
					</view>
				</uni-popup>
				
				<view class="seeChildren" v-if="item.childrenComments.length != 0" @click="openChildrenComments(item.childrenComments,index)">
					查看评论
				</view>
				
			</view>
		</view>
		
		<uni-popup ref="popup">
			<view class="pop">
				<input :focus="inputShow" type="text" v-model="reply.replyContent" :placeholder="'回复'+replyTo+': '">
				<button type="default" @click="send(item)">发送</button>
			</view>
		</uni-popup>
		
		<view class="seeMore">
			<u-loadmore 
				:fontSize="24"
				color="#c7c7c7"
				:iconSize="26"
				:status="loadStatus" 
				@loadmore="getMore"
				loading-text="正在获取" 
				loadmore-text="查看更多" 
				nomore-text="没有更多了" 
				lineColor="#dfdfdf"
				:dashed="false"
				line
			/>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			commentsList:{
				type: Array,
				default:{},
				required: true
			}
		},
		data(){
			return{
				replyContent:'',
				inputShow:false,
				inputBottom: 0,
				replyTo:-1,
				replyToInner: -2,
				maskClose:false,
				lastChildIndex: -1,
				childList:[],
				zIndex: 999,
				replyChild:-1, //评论哪一楼
				replyKid: -2,  //评论哪一楼的哪一层
				reply:{
					child:false, //回复楼
					kid: false, //回复层中层
					replyContent: '',
				},
				timeUtil:new Date(),
				hasMore: true,
				loadStatus: 'loadmore', // 'loadmore' | 'loading' | 'nomore'
				page:1,
				pageSize:13
			}
		},
		methods:{
			prepareToCommentChild(child, replyTo){
				this.reply.replyContent = ''
				this.$refs.popup.open('bottom')
				this.inputShow = true
				this.replyTo = replyTo
				this.replyChild = child
				this.reply.kid = false,
				this.reply.child = true
			},
			prepareToCommentKid(child,kid,replyTo){
				this.reply.replyContent = ''
				this.$refs.popup.open('bottom')
				this.inputShow = true
				this.replyTo = replyTo
				this.replyChild = child
				this.replyKid = kid
				this.reply.child = false,
				this.reply.kid = true
			},
			blur(item){
				this.inputShow = false
				this.replyTo = -1,
				uni.onKeyboardHeightChange((res)=>{
					this.inputBottom = res.height
				})
			},
			// changeLikeStatus(item){
			// 	this.commentsList.find(obj => obj.id == item.id).isLike = !item.isLike
			// },
			openChildrenComments(list,index){
				if(index != this.lastChildIndex){
					this.lastChildIndex = index
					this.childList = list
				}
				this.$refs.childList[index].open('bottom')
				this.maskClose = false
			},
			//层中层点赞
			like(id, kid){
				kid.isLike = !kid.isLike
				//console.log(this.commentsList.find(obj => obj.id == id).)
				this.commentsList.find(obj => obj.id == id).childrenComments.find(obj => obj.id == kid.id).isLike = kid.isLike
				if(kid.isLike){
					//console.log(this.commentsList.find(obj => obj.id == item.id).childrenComments.find(obj => obj.id == kid.id).likes)
					this.commentsList.find(obj => obj.id == id).childrenComments.find(obj => obj.id == kid.id).likes++
				}else{
					this.commentsList.find(obj => obj.id == id).childrenComments.find(obj => obj.id == kid.id).likes--
				}
			},
			//楼层点赞
			setLikes(id, like){
				like = !like
				this.commentsList.find(obj => obj.id == id).isLike = like
				if(like){
					this.commentsList.find(obj => obj.id == id).likes++
				}else{
					this.commentsList.find(obj => obj.id == id).likes--
				}
			},
			close(item){
			},
			//阻止遮罩层滑动穿透
			moveStop(){
				return;
			},
			getTime(){
				return this.timeUtil.toLocaleDateString().replaceAll('/', '-')
			},
			send(item, index){
				if(this.reply.replyContent != ''){
					if(this.reply.child == true){ //如果回复层主
						uni.request({
							url:'',
							method:'POST',
							header:{
								xdzn_token: this.$store.state.loginUser.token
							},
							data:{
								
							}
						}).then(res => {
							if(res.data.code == 200){
								this.commentsList.find(obj => obj.id == item.id).childrenComments.push(
									{
										id: item[item.length--].id++, 
										userIsVip: this.$store.state.loginUser.userBaseInfo.isVip,
										isLike: false,
										replyTo: '',
										headPic: this.$store.state.loginUser.userBaseInfo.avatar,
										nickName: this.$store.state.loginUser.userBaseInfo.nickname,
										userTag:[this.this.$store.state.loginUser.userBaseInfo.ownInfo.school, this.this.$store.state.loginUser.userBaseInfo.ownInfo.major],
										content:this.reply.replyContent,
										time: this.getTime(),
										likes: 0,
										childrenComments:[]
									}
								)
							}
						})
					}else{ //如果回复层主
						uni.request({
							url:'',
							method:'POST',
							header:{
								xdzn_token: this.$store.state.loginUser.token
							},
							data:{
								
							}
						}).then(res => {
							if(res.data.code == 200){
								this.commentsList.find(obj => obj.id == this.replyChild).find(obj => obj.id == this.replyKid).push(
									{
										id: item.childrenComments[item.childrenComments.length--].id++,
										userIsVip: this.$store.state.loginUser.userBaseInfo.isVip,
										isLike: false,
										replyTo: this.replyTo,
										headPic: this.$store.state.loginUser.userBaseInfo.avatar,
										nickName: this.$store.state.loginUser.userBaseInfo.nickname,
										userTag:[this.this.$store.state.loginUser.userBaseInfo.ownInfo.school, this.this.$store.state.loginUser.userBaseInfo.ownInfo.major],
										content:this.reply.replyContent,
										time: this.getTime(),
										likes: 0,
										childrenComments:[]
									}
								)
							}
						})
					}
				}
			},
			getMore(){
				if(this.hasMore){
					//开始获取
					this.loadStatus = 'loading',
					uni.request({
						url:'', //获取评论信息的接口
						method:'GET',
						header:{
							xdzn_token: this.$store.state.loginUser.token
						}
					}).then(res => {
						console.log(res)
						if(res.data.code == 200){
							// 更新评论区
							
							// 根据返回的数量判断是=是否还有评论，如果有，那么this.loadStatus = 'loadmore'
							// 否则this.loadStatus = 'nomore'; this.hasMore = false
						}
					})
				}
			},
			seeUser(id){
				uni.request({
					url:'http://162.14.102.246:8090/user/front/homePage/'+id,
					method: 'GET',
					header:{
						xdzn_token:this.$store.state.loginUser.toke,
					}
				}).then(res => {
					console.log(res.data)
					let data1 = res.data.data.home
					console.log(data1)
					
					let userTag = []
					
					data1.tagList.forEach((item)=>{
						userTag.push(item.tagName)
					})
					
					let info = {
						status: data1.status,
						fansCount: data1.fansCount!=null ? data1.fansCount : 0,
						concernCount: data1.concernCount!=null ? data1.concernCount : 0,
						articleTotal: data1.articleTotal,
						blogUrl: data.blogUrl!=null ? data1.blogUrl : '',
						geo: data1.geo,
						background: data1.background!=null ? data1.background : "https://img1.baidu.com/it/u=3579885558,1908697717&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",
						ownInfo:{
							age: data1.age,
							sex: data1.sex,
							school: data1.school,
							major: data1.major
						},
						tagList: userTag
					}
					
					//数据分配
					uni.navigateTo({
						url:`./aboutMe?id=${id}&info=${encodeURIComponent(JSON.stringify(info))}`
					})
				})
			}
		},
		mounted(){
			//console.log(this.commentsList)
		}
	}
</script>

<style scoped>
	.seeMore{
		width: 100%;
		height: 90upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999999;
		margin-top: 20upx;
	}
	
	.pop{
		 width: 750rpx;
		 height:120rpx;
		 background-color: #FFFFFF;
		 display: flex;
		 padding: 20rpx;
		 border-radius: 10upx;
		 box-sizing: border-box;
	}
	.pop button{
		font-size: 24rpx;
		height: 60rpx;
		margin-left: 10rpx;
		width:120rpx;
		background-color: deepskyblue;
	}
	.pop input{
		width: 600rpx;height: 60rpx;border: 1rpx solid #999999;
		padding: 0 10rpx;
		box-sizing: border-box;
	}
	.seeChildren{
		position: relative;
		color: dodgerblue;
		font-size: 0.8rem;
		bottom: 10upx;
		left: 70%;
	}
	.childrenList{
		width: 100%;
		height: 1300upx;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		background-color: white;
		position: relative;
	}
	.commentsList{
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 96%;
	}
	.everComments{
		margin: 0.8rem auto 0;
		min-height: 6.8rem;
		width: 100%;
		border-radius: 10px;
		font-size: 0.8rem !important;
		padding-bottom: 10rpx;
	}
	.everComments::after{
		display: block;
		content: "";
		position: relative;
		width: 80%;
		height: 1rpx;
		background-color: rgba(216, 216, 216, 0.618);
		top: 20rpx;
		transform: translate(16%);
	}
	.userBaseInfo{
		position: relative;
		float: left;
		top: 0.3rem;
		height: 2rem;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.head{
		height: 2.3rem;
		width: 2.3rem;
		border-radius: 50%;
		overflow: hidden;
		border: 1px solid rgba(98, 111, 118, 1.0);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.head>image{
		width: 100%;
		height: 100%;
	}
	.nickName{
		display: block;
		position: relative;
		left: 8px;
		top: -3%;
		width: 9rem;
		font-size: 1rem;
		font-weight: 500;
		color: rgba(40, 41, 47, 1.0);
	}
	.userTag{
		font-size: 0.75rem;
		color: #b2bec3;
	}
	.interaction{
		display: flex;
		justify-content: space-around;
		align-items: center;
		float: right;
		width: 6rem;
		height: 2rem;
	}
	.commentContent{
		width: 80%;
		margin: 2.9rem auto auto;
		word-wrap: break-word;
		word-break: normal;
	}
	.leftMark{
		position: relative;
		left: -5%;
	}
	.rightMark{
		position: relative;
		left: 100%;
		bottom: 0.1rem;
	}
	.vipLogo{
		top: -24rpx;
		position: absolute;
		left: 48rpx;
		bottom: 48rpx;
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.commentArea{
		position: fixed;
		bottom: 0px;
		width: 80%;
		height: 120rpx;
		background-color: ghostwhite;          
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2rpx solid rgba(234, 234, 234, 1.0);
	}
	input{
		font-size: 0.8rem; 
		border: 1px solid darkgrey; 
		height: 70upx;
		width: 100%;
		border-radius: 15px;
		padding-right: 10upx; 
		padding-left: 10upx;
	}
	.send{
		position: relative;
		left: 85%;
		width: 10%;
		height: 80upx;
	}
	.everChildComment{
		display: flex;
		flex-direction: column;
		margin: 0.8rem auto 0;
		min-height: 6.8rem;
		width: 100%;
		border-radius: 10px;
		font-size: 0.8rem !important;
		padding-bottom: 10rpx;
	}
	.everChildComment::after{
		display: block;
		content: "";
		position: relative;
		width: 80%;
		height: 1rpx;
		background-color: rgba(216, 216, 216, 0.618);
		top: 20rpx;
		transform: translate(16%);
	}
</style>